<template>
  <div class="app-container">
	  <el-table :data="rightData" border style="width: 100%;" height="600">
          <el-table-column align="center" prop="index" label="序号" :show-overflow-tooltip="true" label-width="66px" type="index">
			  <template slot-scope="scope">
			    <div>
			      {{(page-1)*limit+(scope.$index+1)}}
			    </div>
			  </template>
		  </el-table-column>
          <el-table-column align="center" prop="item_name" label="名称" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column align="center" label="类别" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div v-for="item in leftData" v-if="item.unid == scope.row.cate_id">
                {{item.cate_name}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="card_num" label="编号" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column align="center" prop="specification" label="规格" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column align="center" label="状态" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.status == 1">启用</el-tag>
              <el-tag type="warning" v-if="scope.row.status == 2">不启用</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="is_return" label="是否允许退费" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.is_return == 1">允许</el-tag>
              <el-tag type="warning" v-if="scope.row.is_return == 0">不允许</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="price" label="单价" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column align="center" prop="units" label="单位" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column align="center"  label="操作" width="120px">
            <template slot-scope="scope">
              <el-button type="primary" size="small" icon="el-icon-search" @click="handleClick(scope.row)">查看</el-button>
              <!-- <el-button type="success" size="small" icon="el-icon-edit" @click="editData(scope.row)">编辑</el-button> -->
            </template>
          </el-table-column>
        </el-table>
		<el-dialog title="查看" :visible.sync="showAdd" width="800px">
			<add-data :leftData="leftData" :lessionList="lessionList" :teaList="teaList" :stuData="stuData" :queryType="queryType" :btn="'编辑'" ref="query"></add-data>
		</el-dialog>
  </div>
</template>

<script>
	import addData from './addData.vue'
  export default {
    name: 'index2',
	components:{
		addData
	},
    data() {
      return {
        stuData:{}, //点击当前行信息
		showAdd:false, //查看弹窗状态
      }
    },
    methods: {
      //查看
	  handleClick(row){
		this.stuData = row
		this.showAdd = true
		this.$nextTick(() => {
			this.$refs.query.queryData()
		})
		console.log(row);  
	  },
    },
    created() {
      console.log('rightData',this.rightData);
	  console.log('leftData',this.leftData);
    },
	props:{
		rightData:{
			type:Array,
			default:[],
		},
		leftData:{
			type:Array,
			default:[],
		},
		lessionList:{
			type:Array,
			default:[],
		},
		teaList:{
			type:Array,
			default:[],
		},
		queryType:{
			type:Function,
			default:() => {}
		},
		page:{
			type:Number,
			default:0,
		},
		limit:{
			type:Number,
			default:0,
		}
	}
  }
</script>

<style lang="scss" scoped>
</style>
